<template>
  <div>
    <Searchbar>
      <p class="page-title">实验管理</p>
      <el-input style="margin-right: 10px" @change="getList" v-model="search.experiment_name" placeholder="请输入实验名称"></el-input>
      <el-button @click="getList" type="primary">查询</el-button>
<!--      <el-button class="search-btn" @click="go('pub/images')" type="warning">环境管理</el-button>-->
      <el-button class="search-btn" @click="goCreate" type="primary">新建实验</el-button>
    </Searchbar>

<!--    <TableBar>-->
<!--      <el-button @click="goCreate" type="primary">新建实验</el-button>-->
<!--      <el-button @click="go('pub/images')" type="warning">环境管理</el-button>-->
<!--    </TableBar>-->

    <table cellspacing="0" cellpadding="0" class="obj-con-table">
       <colgroup>
    <col style="width: 10px;">
    <col style="width: 150px;">
    <col style="width: 40px;">
    <col style="width: 40px;">
    <col style="width: 40px;">
    <col style="width: 100px;">
    <col style="width: 210px;">
<!--    <col style="width: 100px;">-->
   </colgroup>
        <thead>
          <tr>
            <td>序号</td>
            <td>实验名称</td>
            <td>参与人数</td>
<!--            <td>提交数量</td>-->
<!--            <td>评阅数量</td>-->
            <td>状态</td>
            <td>存活实例</td>
            <td>创建时间</td>
            <td>操作</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(c, i) in tableData" :key="'course' + i">
            <td>{{i+1}}</td>
            <td>
                <p>{{c.experiment_name}}</p>
            </td>
<!--            <td class="flex-row-around" @click="goExperiment(c.id)">-->
<!--              <div class="table-list-item-avatar">-->
<!--                <div>{{c.experiment_name.substring(0, 4)}}</div>-->
<!--              </div>-->
<!--              <div class="table-list-item-con-name">-->
<!--                <p>{{c.experiment_name}}</p>-->
<!--&lt;!&ndash;                <p class="price">￥{{c.price/100}}</p>&ndash;&gt;-->
<!--              </div>-->
<!--            </td>-->
            <td>{{c.student_count}}</td>
<!--            <td>{{c.report_count}}</td>-->
<!--            <td>{{c.read_report_count}}</td>-->
            <td>
              <status-show :status="c.status" style="text-align: left"/>
            </td>
            <td>{{c.live_ins_count}}</td>
            <td>{{c.create_time}}</td>
            <td>
              <el-button @click="goExperiment(c.id)" type="primary">详情</el-button>
              <el-button @click="goEdit(c)" type="warning">编辑</el-button>
              <el-button @click="onDown(c.id)" v-if="c.status == 'N'" type="info">下架</el-button>
              <el-button @click="onUp(c.id)" v-else  type="success">上架</el-button>
              <el-button @click="onDelete(c)" v-if="c.status != 'N'" type="danger">删除</el-button>
            </td>
          </tr>
        </tbody>
      </table>
    <el-pagination
      background
      layout="prev, pager, next, jumper"
      @current-change="handleCurrentChange"
      @size-change=handleSizeChange
      :current-page.sync="search.page"
      :page-size="search.page_size"
      :total="total"
    ></el-pagination>
    <MulUpload :temp="3" :type="5" @onClose="onHideUpload" :show="showUpload" />
  </div>
</template>
<script>
import pageMixin from "@/mixins/pageMixin";
import { experimentModel} from "@/api/models";
import Searchbar from "@/components/Searchbar";
import TableBar from "@/components/TableBar";
import selectionMixin from '@/mixins/selectionChang.js';
import uploadMixin from "@/mixins/uploadMixin";
import MulUpload from "@/components/MulUpload";
import CreateFilter from '@/mixins/CreateFilter.js'
import StatusShow from '../components/StatusShow.vue';
import goMixin from '@/mixins/goMixin.js'
import {WConfirm} from '@/utils/utils.js'
import {Message} from "element-ui";
export default {
  mixins: [pageMixin, selectionMixin, uploadMixin, CreateFilter, goMixin],
  components: { Searchbar, TableBar, MulUpload, StatusShow},
  data() {
    return {
      tableData: [],
      total: 0,
      search: {
        id: null,
        experiment_name: null,
        knowledge_id: null,
        page: 1,
        page_size: 10
      },
      selectedKnowledge: null,
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    onMulSend() {
      console.log('onMulSend')
    },
    goCreate() {
      this.$router.push('/create/experiment');
    },
    getList() {
      console.log("getList");
      experimentModel.list(
        this.search,
        res => {
          this.total = res.total_records;
          this.tableData = res.data.map(v => {
            return v;
          });
        },
        err => {
          console.log(err);
        }
      );
    },
    goEdit(row) {
      this.$router.push('/edit/experiment/' + row.id)
    },
    onDel(row) {
      console.log('on del ', row)
    },
    onDown(id) {
      // 下架
      WConfirm('确定下架该实验', () => {
        this.setStatus('C', id)
      })
    },
    onUp(id) {
      // 上架实验
      WConfirm('确定上架该实验', () => {
        this.setStatus('N', id)
      })
    },
    setStatus(status, id) {
      experimentModel.setStatus({
        id: id,
        status: status
      },res=>{
        Message.success(res.message)
        this.getList()
      },err=>{
        console.log(err.message)
        // Message.warning(err.message)
      })
    },
    onDelete(o) {
      // 更改实验show字段
      WConfirm('确定删除该实验', () => {
        this.setShow('F', o)
      })
    },
    setShow(show, o) {
      experimentModel.setShow({
        o: o,
        show: show
      },res=>{
        Message.success(res.message)
        this.getList()
      },err=>{
        // Message.warning(err.message)
      })
    },
  }
};
</script>
<style lang="scss">
.el-autocomplete-suggestion {
  width: auto !important;
}
.text-default span{
  color: orange;
}
</style>